<!DOCTYPE html>
<html>
<head>
    <title >千年匠心·腐乳的制作密码</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="style.css">
    <style>
        /* 确保按钮组不会导致溢出 */
        .difficulty-buttons {
            max-height: 60vh;
            overflow-y: auto;
        }
    </style>
</head>
<body class="index-page">
    <div class="container" >
        <!-- 主内容区域 -->
        <div class="main-content">
            <div class="header">
                <h1>千年匠心</h1>
                <h2>腐乳的制作密码</h2>
                <h3>请选择您当前的程度进行答题：</h3>
            </div>

            <div class="difficulty-buttons">
                <button class="btn easy" onclick="startGame('easy')">新手学徒</button>
                <button class="btn medium" onclick="startGame('medium')">制曲师傅</button>
                <button class="btn hard" onclick="startGame('hard')">匠人大师</button>
            </div>
        </div>
        <!-- 固定页脚 -->
        <div class="footer">
            <div class="stats">
                <span>👥 传承人数 356</span>
                <span>🏆 最高记录 100分</span>
            </div>
            <!-- 修改index.html中的sound元素 -->
<p class="sound" id="soundToggle" onclick="toggleMusic()">🎵 背景音效：开</p>
        </div>
    </div>
 
    <audio id="bgMusic" loop crossorigin="anonymous">
        <source src="music/bgmusic.mp3" type="audio/mpeg">
    </audio>
    

    <script>
        // 防止移动端触摸滚动
        document.addEventListener('touchmove', function(e) {
            if (e.target.className.indexOf('difficulty-buttons') === -1) {
                e.preventDefault();
            }
        }, { passive: false });

        function startGame(difficulty) {
    // 清除结果页背景状态
    sessionStorage.removeItem('resultBackground');
    localStorage.setItem('selectedDifficulty', difficulty);
    window.location.href = 'answer.html';
}
                // 音乐控制
    let isMusicOn = localStorage.getItem('musicState') !== 'off'; // 初始化状态
    const bgMusic = document.getElementById('bgMusic');
    bgMusic.volume = 0.3;

    // 添加触摸事件监听（移动端专用）
    let isFirstTouch = true;
    document.addEventListener('touchstart', function firstTouch() {
        if (isFirstTouch) {
            bgMusic.play().catch(() => {
                // 显示播放按钮
                document.getElementById('soundToggle').style.display = 'block';
            });
            isFirstTouch = false;
        }
    }, { once: true });

    function toggleMusic() {
        isMusicOn = !isMusicOn;
        bgMusic[isMusicOn ? 'play' : 'pause']();
        document.getElementById('soundToggle').innerHTML = `🎵 背景音效：${isMusicOn ? '开' : '关'}`;
        localStorage.setItem('musicState', isMusicOn ? 'on' : 'off');
        document.getElementById('musicAlert').style.display = isMusicOn ? 'none' : 'block';
        // 处理iOS特殊要求
        if (isMusicOn) {
            bgMusic.play().catch(error => {
                console.log('需要用户交互:', error);
            });
        }
    }

    // 页面加载后处理
    window.addEventListener('load', function() {
        // 桌面端自动播放
        if (!/Mobi|Android/i.test(navigator.userAgent)) {
            bgMusic.play().catch(() => {});
        }
        if (/Mobi|Android/i.test(navigator.userAgent)) {
    document.getElementById('musicAlert').style.display = 'block';
}
        // 更新状态显示
        document.getElementById('soundToggle').innerHTML = 
            `🎵 背景音效：${isMusicOn ? '开' : '关'}`;
    });

    // 添加音频加载错误处理
    bgMusic.addEventListener('error', function() {
        console.error('音频加载失败，请检查：');
        console.log('1. 文件路径是否正确');
        console.log('2. 文件格式是否为MP3');
        console.log('3. 服务器是否允许音频加载');
    });

        // 初始化音乐状态
        window.onload = function() {
            const savedState = localStorage.getItem('musicState') || 'on';
            isMusicOn = savedState === 'on';
            bgMusic.volume = 0.3; // 设置音量
            if (isMusicOn) bgMusic.play().catch(() => {}); // 处理自动播放限制
        }
                // 在index.html的script中添加
        document.addEventListener('DOMContentLoaded', function() {
            const clickHandler = () => {
                bgMusic.play().then(() => {
                    document.removeEventListener('click', clickHandler);
                }).catch(() => {});
            };
            
            document.addEventListener('click', clickHandler);
        });
        // 在原有的音乐控制逻辑上添加以下内容
let musicSession = {
    isPlaying: false,
    currentTime: 0,
    volume: 0.3
};

// 保存音乐状态到 sessionStorage（更即时）
function saveMusicState() {
    const audio = document.getElementById('bgMusic');
    musicSession = {
        isPlaying: !audio.paused,
        currentTime: audio.currentTime,
        volume: audio.volume
    };
    sessionStorage.setItem('musicSession', JSON.stringify(musicSession));
}

// 跳转前强制保存状态
function startGame(difficulty) {
    saveMusicState(); // 关键保存点
    localStorage.setItem('selectedDifficulty', difficulty);
    window.location.href = 'answer.html';
}

// 页面隐藏时保存状态（处理直接关闭标签页的情况）
document.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'hidden') saveMusicState();
});

// 初始化恢复状态
window.addEventListener('load', () => {
    const saved = JSON.parse(sessionStorage.getItem('musicSession') || '{}');
    const audio = document.getElementById('bgMusic');
    
    // 恢复基础设置
    audio.volume = saved.volume || 0.3;
    audio.currentTime = saved.currentTime || 0;
    
    // 桌面端自动续播
    if (saved.isPlaying && !/Mobi|Android/i.test(navigator.userAgent)) {
        audio.play().catch(() => console.log('自动播放被阻止'));
    }
    
    // 移动端显示提示
    if (saved.isPlaying && /Mobi|Android/i.test(navigator.userAgent)) {
        document.getElementById('musicAlert').style.display = 'block';
    }
});
    </script>
    <!-- index.html 添加在body底部 -->

</body>
</html>